<template>
  <div>
    <v-header></v-header>
    <div>
      <div class="ris_cont">
        <!--<div class="ris_cont_headNav">字典页面&gt;科室维护</div>-->
        <div class="ris_cont_headHint">科室信息设置<div class="ris_cont_headHint_add" @click="add_ks()">+</div></div>
        <div class="ris_cont_dept">
          <table class="ris_cont_dept_tab">
            <tr>
              <th>编号</th>
              <th>科室名称</th>
              <th>归属系统</th>
              <th>归属编号</th>
              <th>Ris科室</th>
              <th>是否使用</th>
              <th>排序号</th>
              <!--<th>备注</th>-->
              <th>操作</th>
            </tr>
            <tr v-for="(dept,index) in  depts">
              <td>{{dept.code}}</td>
              <td>{{dept.name}}</td>
              <td>{{dept.source}}</td>
              <td>{{dept.sourcecode}}</td>
              <td>{{dept.usepacs | usePacsfileter}}</td>
              <td>{{dept.isuse | usefilter}}</td>
              <td>{{dept.sortnum}}</td>
              <!--<td>一般科室</td>-->
              <td>
                <button class="ris_cont_dept_tab_change button" @click="update(dept.id,dept.code,dept.name,dept.isuse,dept.sortnum,dept.pycode,dept.source,dept.sourcecode,dept.usepacs)">修改</button>
                <button class="ris_cont_dept_tab_delete bg_yellow button" @click="deleteDept(dept.code)">删除</button>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!--新增或修改模态-->
      <div class="ris_dept_modal1" v-show="ks_motai">
        <div>
          <p class="ris_dept_modal_head">科室设置<span class="ris_dept_modal_btn_close"@click="qvxiao()">X</span></p>
          <table class="ris_dept_modal_tab1">
            <tr>
              <td>科室名称</td>
              <td><input type="text" v-model="deptname" @blur="getpycode($event)"></td>
            </tr>
            <tr>
              <td>拼音码</td>
              <td><input type="text" v-model="pycode"></td>
            </tr>
            <tr>
              <td>归属系统</td>
              <td><input type="text" v-model="source"></td>
            </tr>
            <tr>
              <td>归属编号</td>
              <td><input type="text" v-model="sourcecode"></td>
            </tr>


            <tr>
              <td>排序号</td>
              <td><input type="number" v-model="sortnum" @blur="getsortnum()"></td>
            </tr>
            <tr>
            <tr>
              <td>Ris科室</td>
              <td>
                <select v-model="usepacs">
                  <option value="1" selected >是</option>
                  <option value="0">否</option>
                </select>
              </td>
            <tr>
              <td>是否使用</td>
              <td>
                <select v-model="isuse">
                  <option value="1" selected >是</option>
                  <option value="0">否</option>
                </select>
              </td>
            </tr>

          </table>
          <div class="ris_dept_modal_btn1">
            <button @click="queren()">确认</button>
            <button class="ris_dept_modal_btn_close" @click="qvxiao()">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '@/components/Header/Header';
//  import HeaderComponent from './components/header.vue'
//  import OtherComponent from './components/other.vue'

export default {
  components: {
    'v-header': Header
  },
  created(){
  //  window.localStorage.url="http://10.0.2.23:8090";
    this.$http.get(window.localStorage.url+"/baseDept/findDeptall")
      .then(function (res1) {
        if(res1.data.status=='SUCCESS') {
         this.depts=res1.data.data;
        }
     });



       },
data() {
    return {
       msg: 'hello vue',
      //所有的
      depts:"",
       ks_motai:false,
       //最大排序号
      sortnum:0,
      //添加 1 修改 2 删除 3
      variate:0,
      //deptname
      deptname:"",
      //拼音码
      pycode:"",
      //使用
      isuse:1,
    //ris科室 1/申请单科室 0
      usepacs:1,
      //科室code
      deptcode:"",
      //归属系统
      source:"",
      sourcecode:"",
      deptid:"",

    }
  },
  methods:{

    //公共弹窗
    addModal:function (text,time) {
      $pg.popup({
        text:text,//显示的文本
        btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
        btnBgColor:'#4f56a3',//按钮的颜色
        btnToggle:{
          btnDetermine:true,//确定按钮是否显示
          btnCancel:false,//取消按钮是否显示
        },
        timeOut:time,
      });
    },

    //sortnum 为空时默认为0
    getsortnum(){
      if(this.sortnum==""){
        this.sortnum=0;
      }
    },

    getpycode(e){
//      console.log(this.deptname);
//      this.$http.get(window.localStorage.url+"/pytool/getPyCode?name="+this.deptname)
      this.$http.get(window.localStorage.url+"/baseDept/getPyCode?name="+this.deptname)
        .then(function (res) {
//          console.log(res.data+"拼音码");
          if(res.data.status=='SUCCESS') {
            this.pycode=res.data.data;
          }
        });
    },
    add_ks(){
      this.ks_motai=true;
      this.variate=1;
      this.deptid="";
      this.deptcode="";
      this.deptname="";
      this.isuse=1;
      this.usepacs=1;
//      this.sortnum=sortnum;
      this.pycode="";
      this.source="";
      this.sourcecode="";
      //获得最大排序号
      this.$http.get(window.localStorage.url+"/baseDept/findMaxNum")
      .then(function (res) {
          if(res.data.status=='SUCCESS') {
            this.sortnum = res.data.data;
          }

      });
    },
    update(id,code,name,isuse,sortnum,pycode,source,sourcecode,usepacs){

      this.ks_motai=true;
      this.variate=2;
      this.deptid=id;
      this.deptcode=code;
      this.deptname=name;
      this.isuse=isuse;
      this.usepacs=usepacs;
      this.sortnum=sortnum;
      this.pycode=pycode;
      if(source!=undefined){
        this.source=source;
      }
      if(sourcecode!=undefined) {
        this.sourcecode = sourcecode;
      }else{
        this.sourcecode="";
      }
    },
    deleteDept(code){
      var _this=this;
//      console.log(code);
      $pg.popup({
        text:"确定删除吗？",//显示的文本
        btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
        btnBgColor:'#4f56a3',//按钮的颜色
        determine:function(){
      _this.$http.get(window.localStorage.url+"/baseDept/deletebasedept?code="+code)
        .then(function (res) {
          if (res.data.status == 'SUCCESS') {

            _this.$http.get(window.localStorage.url+"/baseDept/findDeptall")
              .then(function (res1) {
                  _this.depts=res1.data.data;
              });

            this.addModal(res.data.data,1);//公共弹窗

          }else{//失败

            this.addModal(res.data.data,true);//公共弹窗

          }
        });

        },//点击确定执行的方法
      });


    },
    queren(){
//      console.log(this.deptname);
      if(this.deptname==""){

        $pg.popup({
          text:"科室名称不能为空！",//显示的文本
          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor:'#4f56a3',//按钮的颜色
          determine:function(){

          },//点击确定执行的方法
        });

        return;
      }

//      if(this.sortnum==""){
//
//        $pg.popup({
//          text:"排序号不能为空！",//显示的文本
//          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
//          btnBgColor:'#4f56a3',//按钮的颜色
//          determine:function(){
//
//          },//点击确定执行的方法
//        });
//
//        return;
//
//      }

      if(this.variate==1){
//        console.log(this.deptname,this.isuse)
        this.$http.get(window.localStorage.url+"/baseDept/addbasedept?name="+this.deptname+"&isuse="+this.isuse+"&pycode="+this.pycode+"&sortnum="+this.sortnum+"&source="
          +this.source+"&sourceCode="+this.sourcecode+"&usepacs="+this.usepacs)
          .then(function (res) {
//            console.log("添加"+res.data.data);

            if(res.data.status=='SUCCESS') {
              this.ks_motai=false;

              this.$http.get(window.localStorage.url+"/baseDept/findDeptall")
                .then(function (res1) {
                  if(res1.data.status=='SUCCESS') {
                    this.depts=res1.data.data;
                  }
                });

              this.addModal(res.data.data,1);//公共弹窗

            }else{
              this.addModal(res.data.data,true);//公共弹窗

            }
          });
      }
      if(this.variate==2){
//        console.log(this.deptname,this.isuse, this.sortnum,this.pycode,this.deptcode, this.deptid);
        this.$http.get(window.localStorage.url+"/baseDept/updatebasedept?name="+this.deptname+"&isuse="+this.isuse+"&pycode="+this.pycode+"&sortnum="+
          this.sortnum+"&code="+this.deptcode+"&source="+this.source+"&sourcecode="+this.sourcecode+"&id="+ this.deptid+"&usepacs="+this.usepacs)
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              this.ks_motai=false;

              this.$http.get(window.localStorage.url+"/baseDept/findDeptall")
                .then(function (res1) {
                  if(res1.data.status=='SUCCESS') {
                    this.depts=res1.data.data;
                  }
                });

              this.addModal(res.data.data,1);//公共弹窗
            }else{
              this.addModal(res.data.data,true);//公共弹窗
            }
          });
      }

    },

    qvxiao(){
      this.ks_motai=false;
    }
  },
  filters:{
  //过滤器
    usefilter(isuse){
      if(isuse==1){
        return "是";
      }else{
        return "否";
      }
    },

    usePacsfileter(usePacs){
      if(usePacs==1){
        return "是";
      }else{
        return "否";
      }
    },
//  备注
    length6(text){
      text=$.trim(text)+"";
      if(text.length>=7){
        text=text.slice(0,6);
        text=text+"...";
        return text;
      }
    }

  },
//  components: {'other-component': OtherComponent, HeaderComponent,}add_ks()
}
</script>
<style scoped>
  /*body {*/
  /*background-color: #ff0000;*/
/*}*/
  .ris_cont_headHint {
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
  }


/*新增按钮*/
.ris_cont_headHint_add{
  width: 70px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  float: right;
  background-color: #666;
  color: #fff;
  cursor: pointer;
}
/*内容区*/
.ris_cont_dept{
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
}
.ris_cont_dept_tab{
  width: 100%;
  line-height: 40px;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}
.ris_cont_dept_tab tr td,.ris_cont_dept_tab tr th{
  border: 1px solid #ddd;
}
.ris_cont_dept_tab tr th{
  background-color: #666;
  color: #fff;
}
.ris_cont_dept_tab tr td:last-child{
  width: 10%;
}
.ris_cont_dept_tab tr td:last-child button{
  width: 35%;
  height: 26px;
  margin: 0 3%;
  background-color: #215c84;
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.ris_cont_dept_tab tr td:last-child button:hover{
  background-color: #1a4161;
}


/*点击删除弹出的模态框*/
.ris_dept_delete{
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(66,66,66,.2);
  display: none;
}
.ris_dept_delete>div{
  position: absolute;
  width: 260px;
  height: 150px;
  left: 50%;
  top: 50%;
  margin-left: -130px;
  margin-top: -75px;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: #fff;
}
.ris_dept_delete_head{
  height: 30px;
  text-align: right;
  background-color: #999;
  border-radius: 10px 10px 0 0 ;
}
.ris_dept_delete_head span{
  display: inline-block;
  padding: 0 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*文字*/
.ris_dept_delete_text{
  line-height: 70px;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
/*按钮*/
.ris_dept_delete_btn{
  text-align: right;
}
.ris_dept_delete_btn button{
  width: 70px;
  background-color: #215c84;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  height: 30px;
  margin-right: 20px;
}
.ris_dept_delete_btn button:hover{
  background-color: #1a4161;
}

  .ris_cont {
    width: 95%;
    min-width: 1300px;
    /* border: 1px solid red; */
    /*min-height: 700px;*/
    margin: 50px auto 70px;
  }

/*新增或修改的模态*/
.ris_dept_modal1{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(66,66,66,.2);
  z-index: 2;
  /*display: none;*/
}
.ris_dept_modal1>div{
  position: absolute;
  width: 400px;
  height: 440px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -220px;
  border: 1px solid #000;
  background: #f7f7f7;
  border-radius: 10px;
}
/*模态头部*/
.ris_dept_modal_head{
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  border-bottom: 1px solid #666;
  background: #999;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  color: #fff;
}
.ris_dept_modal_head span{
  display: inline-block;
  float: right;
  padding: 0 20px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}
/*模态里面的内容*/
.ris_dept_modal_tab1{
  width: 85%;
  margin: 0 auto;
  line-height: 45px;
  margin-top: 20px;
}
.ris_dept_modal_tab1 tr td:nth-child(1){width: 20%}
.ris_dept_modal_tab1 tr td:nth-child(2){width: 80%}
.ris_dept_modal_tab1 tr td input,.ris_dept_modal_tab tr td select{
  width: 100%;
  height: 28px;
  border: 1px solid #666;
  border-radius: 3px;
  box-sizing: border-box;
}
  .ris_dept_modal_tab1 select{
    width: 100%;
  }
.ris_dept_modal_tab1 tr td textarea{
  width: 100%;
  height: 60px;
  border: 1px solid #666;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  margin-top: 10px;
}
.ris_dept_modal_btn1{
  text-align: right;
}
.ris_dept_modal_btn1 button{
  width: 80px;
  height: 36px;
  background-color: #215c84;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 50px;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}
.ris_dept_modal_btn button:hover{
  background-color: #1a4161;
}

</style>
